<template>
  <border-box title="发布渠道">
      <div v-for="item in plainOptions" :key="item.value" style="margin-bottom: 10px">
        <a-checkbox :checked="item.checked" :value="item.value" @change="onChange">{{item.label}}</a-checkbox>
        <span v-if="item.checked">操作人：{{item.operateName || '--'}}</span>
        <a-button size="small" style="margin-left: 20px" @click="selectOperate(item.value)" v-if="item.checked">选择操作人</a-button>
      </div>
    <j-select-user-by-dep-modal ref="selectModal"
                                    :modal-width="1250"
                                    :actionType="actionType"
                                    :multi="false"
                                    @ok="authorize"/>
  </border-box>
</template>

<script>
  //发布渠道
  import JSelectUserByDepModal from '@/components/jeecgbiz/modal/JSelectUserByDepModal'
  import BorderBox from "./BorderBox";
  import {getAction} from "../../api/manage";

  export default {
    name: "selectPublishChannelHandler",
    components: {BorderBox, JSelectUserByDepModal},
    props: ['params'],
    data() {
      return {
        actionType: 'selectPublish',
        plainOptions : [{
            value: 'website',
            label: '官网',
            checked: false,
          }, {
            value: 'wechat',
            label: '微信', 
            checked: false,
          }, {
            value: 'weibo',
            label: '微博', 
            checked: false,
          }, {
            value: 'trill',
            label: '抖音', 
            checked: false,
          }, {
            value: 'video',
            label: '视频号', 
            checked: false,
          }, {
            value: 'bilibili',
            label: 'B站', 
            checked: false,
          }, {
            value: 'learning',
            label: '学习强国',
            checked: false, 
          }, {
            value: 'renminhao',
            label: '人民号', 
            checked: false,
          }, {
            value: 'kuaishou',
            label: '快手', 
            checked: false,
          }],
        selectType: undefined,
      }
    },
    created() {
      this.queryInfo();
    },
    methods: {
      queryInfo() {
        getAction('task/taskInfo/queryTaskPublishInfo', this.params).then(res => {
          if (res.success) {
            const list = res.result.publishChannelHandler || [];
            // const list = [{
            //   value: 'website',
            //   operateId:'eae10867483b46a7a16196870391d4ac',
            //   operateName:'jsj_txy_02'
            // }, {
            //   value: 'weibo',
            //   operateId:'eae10867483b46a7a16196870391d4ac',
            //   operateName:'jsj_txy_02'
            // }];
            const arr = JSON.parse(JSON.stringify(this.plainOptions));
            for (let i = 0; i < arr.length; i += 1) {
              for (let j = 0; j < list.length; j += 1) {
                if (arr[i].value === list[j].value) {
                  arr[i].checked = true;
                  arr[i].operateId = list[j].operateId;
                  arr[i].operateName = list[j].operateName;
                  this.$set(this.plainOptions, i, arr[i])
                }
              }
            }
          }
        })
      },
      selfValidate() {
        return new Promise((resolve, reject) => {
          const res = this.plainOptions.filter(item => item.checked === true);
          resolve({key: 'selectPublishChannelHandler', value: res})
        })
      },
      onChange(e) {
        const index = this.plainOptions.findIndex(item => item.value === e.target.value);;
        const item = {...this.plainOptions[index]};
        item.checked = e.target.checked;
        item.operateId = undefined;
        item.operateName = undefined;
        this.$set(this.plainOptions, index, item)
      },
      selectOperate(key) {
        this.selectType = key;
        this.$refs.selectModal.showModal()
      },
      authorize(rows, idstr) {
        const index = this.plainOptions.findIndex(item => item.value === this.selectType);;
        const item = {...this.plainOptions[index]};
        item.checked = true;
        item.operateId = rows[0].id;
        item.operateName = rows[0].username;
        this.$set(this.plainOptions, index, item)
      }
    }
  }
</script>

<style scoped>
  .item {
    display: flex;
    align-items: center;
  }

  .item-half {
    flex: 1;
    margin-right: 5px;
  }

  .item-icon {
    cursor: pointer;
  }

</style>